<template>
	<widget-root :styles="styles">
		<view class="rubik" :style="{margin: `-${$px2rpx(styles.margin/2)}rpx`}">
			<view class="rubik-item1" v-if="content.style==1">
				<view class="item-image" :style="{margin: `${$px2rpx(styles.margin/2)}rpx`}" v-if="imgLists[0] && imgLists[0].url" @click="navigate(imgLists[0])">
					<u-image mode="widthFix" :show-loading="false" :src="$getImageUri(imgLists[0].url)"></u-image>
				</view>
			</view>
			<view class="rubik-item2" v-if="content.style==2">
				<view class="item-image" :style="{margin: `${$px2rpx(styles.margin/2)}rpx`}" v-for="(item, index) in imgLists" :key="index" @click="navigate(item)">
					<u-image mode="widthFix" :show-loading="false" :src="$getImageUri(item.url)" v-if="item && item.url"></u-image>
				</view>
			</view>
			<view class="rubik-item3" v-if="content.style==3">
				<view class="item-image" :style="{margin: `${$px2rpx(styles.margin/2)}rpx`}" v-for="(item, index) in imgLists" :key="index" @click="navigate(item)">
					<u-image mode="widthFix" :show-loading="false" :src="$getImageUri(item.url)" v-if="item && item.url"></u-image>
				</view>
			</view>
			<view class="rubik-item4" v-if="content.style==4">
				<view class="item-image" :style="{
                               'width': '50%',
                               'height': '375rpx',
                               'top': 0,
                               'left': 0
                           }" @click="navigate(imgLists[0])">
					<u-image height="100%" width="100%" mode="aspectFill" :src="$getImageUri(imgLists[0].url)"
						v-if="imgLists[0] && imgLists[0].url"></u-image>
				</view>
				<view class="item-image" :style="{
                               'width': '50%',
                               'height': '188rpx',
                               'top':0,
                               'left': '50%'
                           }" @click="navigate(imgLists[1])">
					<u-image height="100%" width="100%" mode="aspectFill" :src="$getImageUri(imgLists[1].url)"
						v-if="imgLists[1] && imgLists[1].url"></u-image>
				</view>
				<view class="item-image" :style="{
                               'width': '50%',
                               'height': '188rpx',
                               'top': '188rpx',
                               'left': '50%'
                           }" @click="navigate(imgLists[2])">
					<u-image height="100%" width="100%" mode="aspectFill" :src="$getImageUri(imgLists[2].url)"
						v-if="imgLists[2] && imgLists[2].url"></u-image>
				</view>
			</view>
			<view class="rubik-item5" v-if="content.style==5">
				<view class="item-image" v-for="(item, index) in imgLists" :key="index" @click="navigate(item)">
					<u-image mode="aspectFill" width="100%" height="100%" :src="$getImageUri(item.url)" v-if="item && item.url">
					</u-image>
				</view>
			</view>
			<view class="rubik-item6" v-if="content.style==6">
				<view class="item-image" :style="{
                               'width': '100%',
                               'height': '188rpx',
                               'top': 0,
                               'left': 0
                           }" @click="navigate(imgLists[0])">
					<u-image height="100%" width="100%" mode="aspectFill" :src="$getImageUri(imgLists[0].url)"
						v-if="imgLists[0] && imgLists[0].url"></u-image>
				</view>
				<view class="item-image" :style="{
                               'width': '50%',
                               'height': '188rpx',
                               'top':'188rpx',
                               'left': 0
                           }" @click="navigate(imgLists[1])">
					<u-image height="100%" width="100%" mode="aspectFill" :src="$getImageUri(imgLists[1].url)"
						v-if="imgLists[1] && imgLists[1].url"></u-image>
				</view>
				<view class="item-image" :style="{
                               'width': '50%',
                               'height': '188rpx',
                               'top': '188rpx',
                               'left': '50%'
                           }" @click="navigate(imgLists[2])">
					<u-image height="100%" width="100%" mode="aspectFill" :src="$getImageUri(imgLists[2].url)"
						v-if="imgLists[2] && imgLists[2].url"></u-image>
				</view>
			</view>
		</view>
	</widget-root>
</template>

<script type="text/javascript">
	export default {
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
		},
		data() {
			return {

			}
		},
		methods: {
			// 跳转页面
			navigate(item) {
				const {
					path,
					params
				} = item.link
				if (!path) return
				this.$Router.push({
					path: path,
					query: params
				})
			}
		},
		computed: {
			imgLists() {
				return this.content.data
			}
		}
	};
</script>

<style lang="scss" scoped>
	.rubik {
		.rubik-item2 {
			display: flex;

			.item-image {
				flex: 1 1 auto;
				width: 50%;
			}
		}

		.rubik-item3 {
			display: flex;

			.item-image {
				flex: 1 1 auto;
				width: 33.3%;
			}
		}

		.rubik-item4,
		.rubik-item6 {
			position: relative;
			width: 100%;
			height: 375rpx;

			.item-image {
				position: absolute;
			}
		}

		.rubik-item5 {
			display: flex;
			flex-wrap: wrap;

			.item-image {
				flex: 1 1 auto;
				width: 50%;
				height: 188rpx;

			}
		}
	}
</style>
